<template>
  <div class="container">
    <div class="topSearch card-search">
      <el-form
        :inline="true"
        :model="formInline"
        key="1"
        class="demo-form-inline"
      >
        <el-form-item label="产品类型">
          <el-select
            size="small"
            v-model="formInline.typesProductType"
            clearable
          >
            <!-- 这个options得掉接口 -->
            <el-option
              v-for="item in optionProductType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-select size="small" v-model="formInline.types" clearable>
            <!-- 这个options得掉接口 -->
            <el-option
              v-for="item in optionssearch"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直径规格">
          <el-select size="small" v-model="formInline.typesDiameter" clearable>
            <el-option
              v-for="item in optionDiameters"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMachineData">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="btnAdd">
        <el-button icon="el-icon-plus" type="primary" @click="addWorkOrder"
          >增加</el-button
        >
      </div>
    </div>
    <div class="card-table">
      <tableContent :tabledata="this.TABLEdata">
        <!-- <el-table-column
          slot="status"
          label="状态"
          align="center">
          <template slot-scope="scope">
            <el-tag size="medium" :type="scope.row.status === '已出炉' ? 'success' : 'primary'">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column slot="operation" label="操作" align="center">
          <template slot-scope="scope">
            <div style="display: flex">
              <!-- <el-button type="text" class="btnText" size="small" @click="outOven(scope.row)">出炉</el-button> -->
              <el-button
                type="text"
                class="btnText"
                size="small"
                :disabled="disByHours(scope.row)"
                @click="editFrom(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                class="btnText"
                size="small"
                @click="detail(scope.row)"
                >详情</el-button
              >
            </div>
          </template>
        </el-table-column>
      </tableContent>
      <div
        class="block"
        style="
          display: flex;
          flex-direction: row-reverse;
          margin-top: 10px;
          padding-right: 10px;
        "
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      class="dail"
      width="74%"
      :title="dialogTitle"
      :visible.sync="addEditDialogTableVisible"
      :modal-append-to-body="false"
    >
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForms"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item class="groupsInput" label="规格型号" prop="specification">
          <el-select
            v-model="ruleForm.specification"
            :disabled="inputOven"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            class="inp"
            placeholder="请输入规格型号"
            v-if="ruleForm.specification === '其他'"
            v-model="inputType"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <el-select
            v-model="ruleForm.productType"
            :disabled="inputOven"
            clearable
          >
            <el-option
              v-for="item in optionProductType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          class="groupsInput"
          label="直径规格"
          prop="diameterSpecification"
        >
          <el-select
            v-model="ruleForm.diameterSpecification"
            :disabled="inputOven"
            clearable
          >
            <el-option
              v-for="item in optionDiameter"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            class="inp"
            placeholder="请输入直径规格"
            v-if="ruleForm.diameterSpecification === '其他'"
            v-model="inputDiameterType"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="createNumWay">
          <el-switch
            v-model="ruleForm.createNumWay"
            :disabled="operations !== 'add'"
            active-color="#4D70FF"
            inactive-color="#f67878"
            active-text="按数量填写"
            inactive-text="自定义填写"
          >
          </el-switch>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.createNumWay"
          label="产品数量"
          prop="amount"
        >
          <el-input
            :disabled="numberAble"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model="ruleForm.amount"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="!ruleForm.createNumWay"
          label="起始编号"
          prop="startNumber"
        >
          <el-input
            :disabled="numberAble"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model="ruleForm.startNumber"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="!ruleForm.createNumWay"
          label="结束编号"
          prop="endNumber"
        >
          <el-input
            :disabled="numberAble"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            v-model="ruleForm.endNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="焦配比说明" prop="cokeRatio">
          <el-input
            :disabled="inputOven"
            type="textarea"
            v-model="ruleForm.cokeRatio"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="inputOven" label="出炉时间" prop="outOvenTime">
          <div class="dateClass">
            <el-form-item prop="dateDay">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.dateDay"
                style="width: 70%"
              ></el-date-picker>
            </el-form-item>
            <div class="line">-</div>
            <el-form-item prop="dateTime">
              <el-time-picker
                placeholder="选择时间"
                v-model="ruleForm.dateTime"
                style="width: 70%"
              ></el-time-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item class="btnflex">
          <el-button type="primary" @click="submitForm('ruleForms')"
            >提交</el-button
          >
          <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  profileCreate,
  profileGetData,
  profileEdit,
} from "@/api/profileApi/profileOrder.js";
// import '@/mock/dataCenter.js'
import tableContent from "@/components/tableContent/index.vue";
import { changeAble } from "@/mixin/changeAble.js";
import { mapGetters } from "vuex";
export default {
  name: "profileWorkOrder",
  components: {
    tableContent,
  },
  mixins: [changeAble],
  data() {
    return {
      TABLEdata: {
        formHead: [],
        tableAllData: [],
      },
      formInline: {
        typesProductType: "",
        types: "",
        typesDiameter: "",
      },
      ruleForm: {
        createNumWay: true,
      },
      rules: {
        specification: [
          { required: true, message: "请选择设备型号", trigger: "blur" },
        ],
        productType: [
          { required: true, message: "请选择产品类型", trigger: "blur" },
        ],
        startNumber: [
          { required: true, message: "请填写起始编号", trigger: "blur" },
        ],
        amount: [
          { required: true, message: "请填写产品数量", trigger: "blur" },
        ],
        endNumber: [
          { required: true, message: "请填写结束编号", trigger: "blur" },
        ],
        diameterSpecification: [
          { required: true, message: "请选择直径规格", trigger: "blur" },
        ],
        dateDay: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        dateTime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        cokeRatio: [
          { required: true, message: "请填写焦配比说明", trigger: "blur" },
        ],
      },
      addEditDialogTableVisible: false,
      dialogTitle: "",
      inputOven: false,
      numberAble: true,
      datePicker: "",
      optionProductType: [
        {
          label: "石墨电极",
          value: "石墨电极",
        },
        {
          label: "接头",
          value: "接头",
        },
        {
          label: "方子",
          value: "方子",
        },
      ],
      options: [
        {
          label: "HP",
          value: "HP",
        },
        {
          label: "RP",
          value: "RP",
        },
        {
          label: "IP",
          value: "IP",
        },
        {
          label: "UHP",
          value: "UHP",
        },
        {
          label: "SHP",
          value: "SHP",
        },
        {
          label: "其他",
          value: "其他",
        },
      ], // 调获取规格类型接口
      optionssearch: [
        {
          label: "HP",
          value: "HP",
        },
        {
          label: "RP",
          value: "RP",
        },
        {
          label: "IP",
          value: "IP",
        },
        {
          label: "UHP",
          value: "UHP",
        },
        {
          label: "SHP",
          value: "SHP",
        },
      ],
      optionDiameter: [
        {
          label: "φ500",
          value: "φ500",
        },
        {
          label: "φ400",
          value: "φ400",
        },
        {
          label: "φ300",
          value: "φ300",
        },
        {
          label: "其他",
          value: "其他",
        },
      ],
      optionDiameters: [
        {
          label: "φ500",
          value: "φ500",
        },
        {
          label: "φ400",
          value: "φ400",
        },
        {
          label: "φ300",
          value: "φ300",
        },
      ],
      inputType: "", // 自定义规格型号
      inputDiameterType: "",
      operations: "",
      pageSize: 10,
      currPage: 1,
      total: 50,
    };
  },
  props: {},
  computed: {
    ...mapGetters({
      getUserInfos: "getUserInfo",
    }),
    disByHours() {
      return function (val) {
        return this.contrastTime(val);
      };
    },
  },
  created() {
    this.getMachineData();
  },
  mounted() {
    this.checkName = this.getUserInfos.account;
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "color: rgb(63,66,84);font-weight: bold;font-size: 14px";
      } else {
        return "";
      }
    },
    outOven(row) {
      console.log(row);
      this.dialogTitle = "出炉工单";
      this.operations = "out";
      this.inputOven = true;
      this.numberAble = true;
      this.addEditDialogTableVisible = true;
      this.ruleForm = row;
    },
    detail(row) {
      console.log("zhijan", row);
      var arg = JSON.stringify({
        createTime: row.createTime,
        productType: row.productType,
        diameterSpecification: row.diameterSpecification,
        specification: row.specification,
      });
      this.$router.push({
        name: "qualityItem",
        query: {
          orderId: row._id,
          type: "showByorders",
          mes: arg,
        },
      });
    },
    editFrom(row) {
      this.dialogTitle = "编辑成型工单";
      this.inputOven = false;
      this.operations = "out";
      this.addEditDialogTableVisible = true;
      this.numberAble = true;
      this.ruleForm = row;
    },
    addWorkOrder() {
      this.dialogTitle = "新增成型工单";
      this.operations = "add";
      this.inputOven = false;
      this.numberAble = false;
      this.ruleForm = {
        createNumWay: true,
      };
      this.addEditDialogTableVisible = true;
    },
    submitForm(formName) {
      this.$nextTick(
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.operations === "add") {
              // this.ruleForm.state = '待出炉'
              this.ruleForm.writeMan = this.checkName; // 质检人
              if (this.ruleForm.diameterSpecification === "其他") {
                this.ruleForm.diameterSpecification = this.inputDiameterType;
              }
              if (this.ruleForm.specification === "其他") {
                this.ruleForm.specification = this.inputType;
              }
              console.log("增加的ruleForm", this.ruleForm);
              profileCreate(this.ruleForm).then((res) => {
                // 加编号重复的判断
                console.log("创建设备类型", res.data);
                if (res.data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: "创建成功",
                    type: "success",
                  });
                  this.addEditDialogTableVisible = false;
                } else {
                  this.$message({
                    message: res.data.message,
                    type: "warning",
                  });
                  this.addEditDialogTableVisible = true;
                }
                this.getMachineData();
              });
            } else {
              this.ruleForm.writeMan = this.checkName; // 质检人
              if (this.ruleForm.diameterSpecification === "其他") {
                this.ruleForm.diameterSpecification = this.inputDiameterType;
              }
              if (this.ruleForm.specification === "其他") {
                this.ruleForm.specification = this.inputType;
              }
              console.log("编辑的ruleForm", this.ruleForm);
              profileEdit(this.ruleForm).then((res) => {
                console.log("编辑成功没", res.data);
                if (res.data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: "编辑成功",
                    type: "success",
                  });
                } else {
                  this.$message({
                    message: "编辑失败",
                    type: "warning",
                  });
                }
                this.getMachineData();
                this.addEditDialogTableVisible = false;
              });
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        })
      );
    },
    cancelForm() {
      this.ruleForm = {
        createNumWay: true,
      };
      this.inputType = "";
      this.inputDiameterType = "";
      this.addEditDialogTableVisible = false;
    },
    getMachineData() {
      // this.$http.get('http://20211129Mock.com/tableData/profileWorkOrder').then(res => {
      const params = {
        pageSize: this.pageSize,
        currPage: this.currPage,
        diameterSpecification: this.typesDiameter,
        productType: this.typesProductType,
        where: "成型工艺",
        specification: this.formInline.types,
      };
      profileGetData(params).then((res) => {
        if (res.data.code === 200) {
          console.log("+++++", res.data.data);
          res.data.data.formHead.cokeRatio = "焦配比说明";
          delete res.data.data.formHead.checkStatus;
          var arr = [];
          for (var i in res.data.data.formHead) {
            var o = {};
            o[i] = res.data.data.formHead[i];
            arr.push(o);
          }
          this.TABLEdata.formHead = arr;
          var tableBody = JSON.parse(JSON.stringify(res.data.data.data));
          tableBody.forEach((item) => {
            item.completeCreateTime = item.createTime;
            if (item.createTime.length === 19) {
              item.createTime = item.createTime.substring(5, 16);
            }
          });
          this.TABLEdata.tableAllData = tableBody;
          this.total = res.data.data.totalCount;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMachineData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getMachineData();
    },
  },
};
</script>

<style  scoped>
.container {
  .topSearch {
    background-color: #fff;
    padding: 15px 20px -5px 30px;
    box-sizing: border-box;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    .btnAdd {
      padding: 5px 3px 10px 1px;
    }
  }
  .btnText {
    color: $primary;
  }
  .el-switch {
    margin: -1px 0 0 10px;
     .el-switch__label {
      color: #84868a;
    }
     .el-switch__label.is-active {
      color: #4d70ff;
    }
  }
  .dail {
     .el-dialog__body {
      padding-top: 10px !important;
    }
     .el-divider--horizontal {
      margin: 0 0 28px 0;
    }
    .groupsInput {
       .el-form-item__content {
        display: flex;
        .inp {
          .el-input__inner {
            width: 40%;
            margin-left: 20px;
          }
        }
      }
    }
    .btnflex {
      display: flex;
      justify-content: flex-end;
       .el-form-item__content {
        margin-right: 10px;
        .el-button {
          margin-left: 40px;
        }
      }
    }
    .dateClass {
      display: flex;
      .line {
        margin-left: -40px;
        font-weight: bold;
        width: 30px;
      }
    }
  }
}
</style>
